<template>
	<view class="store-list-page">
		<!-- 搜索栏 -->
		<view class="search-bar">
			<view class="search-input-wrap">
				<text class="icon-search">🔍</text>
				<input class="search-input" placeholder="请输入门店" v-model="searchKey" />
			</view>
			<view class="search-btn" @click="handleSearch">搜索</view>
		</view>

		<!-- 定位刷新按钮 -->
		<!-- <view class="location-refresh" @click="handleRefresh">
			<text class="icon-refresh">🔄</text>
		</view> -->

		<!-- 门店列表 -->
		<view class="store-list">
			<view class="store-item" v-for="(item, index) in storeList" :key="index">
				<view class="store-info">
					<view class="store-name">{{ item.store_name }}</view>
					<view class="store-status">
						<text class="status-tag">营业中</text>
						<text class="time">{{ item.businessTime }}</text>
						<text class="distance">{{ item.distance }}1000m</text>
					</view>
					<view class="store-address">{{ item.store_label }}{{ item.store_detail }}</view>
				</view>
				<button class="nav-btn" @click="handleNav(item)">预览</button>
			</view>
		</view>
		<couponPopup v-if='showCoupon' :visible="showCoupon" @close="showCoupon = false" :item='active'
			:order_id='order_id'></couponPopup>
	</view>
</template>

<script>
	import couponPopup from '@/components/coupon.vue'
	export default {
		components: {
			couponPopup
		},
		data() {
			return {
				showCoupon: false,
				order_id: '',
				source: '',
				searchKey: '', // 搜索关键词
				storeList: [],
				/*最后一页码数*/
				last_page: 0,
				/*当前页面*/
				page: 1,
				/*每页条数*/
				list_rows: 10,
				active: undefined,
			};
		},
		onLoad(e) {
			this.order_id = e.order_id
			console.info(this.order_id)
			this.source = e.source
			this.getAgentStoreList();
		},
		methods: {
			getAgentStoreList() {
				let self = this;
				let page = self.page;
				let list_rows = self.list_rows;
				self.loading = true;
				self._post(
					'user.agent/agentStoreList', {
						page: page || 1,
						list_rows: list_rows,
						name: self.searchKey
					},
					res => {
						self.loading = false;
						self.last_page = res.data.list.last_page;
						self.storeList = self.storeList.concat(res.data.list.data);
						if (res.data.list.last_page <= 1) {
							self.no_more = true;
						} else {
							self.no_more = false;
						}
					}
				);
			},
			// 处理搜索
			handleSearch() {
				uni.showToast({
					title: `搜索关键词：${this.searchKey}`,
					icon: 'none'
				});
				// 实际场景中可根据searchKey过滤storeList
			},
			// 处理刷新
			handleRefresh() {
				uni.showToast({
					title: '刷新门店列表',
					icon: 'none'
				});
			},
			// 处理导航
			handleNav(item) {
				// uni.showToast({
				// 	title: `导航至：${address}`,
				// 	icon: 'none'
				// });

				this.active = item
				this.showCoupon = true
				// 实际场景中可调用地图导航API
			},

			getData() {
				this._get(
					'user.order/qrcode', {
						order_id: this.order_id,
						source: this.source
					},
					function(res) {
						uni.hideLoading();
						this.isCodeImg = true;
						this.codeImg = res.data.qrcode;
					}
				);
			}

		}
	};
</script>

<style scoped>
	.store-list-page {
		padding: 10px;
		background-color: #f8f8f8;
	}

	/* 搜索栏样式 */
	.search-bar {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}

	.search-input-wrap {
		flex: 1;
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 8px;
		padding: 8px 12px;
		border: 1px solid #eee;
	}

	.icon-search {
		margin-right: 8px;
	}

	.search-input {
		flex: 1;
		height: 28px;
		font-size: 14px;
	}

	.search-btn {
		width: 70px;
		height: 44px;
		line-height: 44px;
		text-align: center;
		background-color: #007aff;
		color: #fff;
		border-radius: 8px;
		margin-left: 10px;
		font-size: 14px;
	}

	/* 定位刷新按钮 */
	.location-refresh {
		position: absolute;
		top: 20px;
		right: 20px;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.icon-refresh {
		font-size: 20px;
	}

	/* 门店列表样式 */
	.store-list {
		margin-top: 20px;
	}

	.store-item {
		background-color: #fff;
		border-radius: 8px;
		padding: 12px;
		margin-bottom: 10px;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	}

	.store-info {
		flex: 1;
	}

	.store-name {
		font-size: 16px;
		font-weight: 500;
		color: #333;
		margin-bottom: 6px;
	}

	.store-status {
		display: flex;
		align-items: center;
		margin-bottom: 6px;
		font-size: 13px;
	}

	.status-tag {
		background-color: #52c41a;
		color: #fff;
		padding: 2px 6px;
		border-radius: 4px;
		margin-right: 8px;
		font-size: 12px;
	}

	.time {
		color: #666;
		margin-right: 12px;
	}

	.distance {
		color: #007aff;
	}

	.store-address {
		font-size: 13px;
		color: #999;
		line-height: 1.5;
	}

	.nav-btn {
		width: 60px;
		height: 30px;
		line-height: 30px;
		font-size: 13px;
		background-color: #fff;
		color: #007aff;
		border: 1px solid #007aff;
		border-radius: 4px;
	}
</style>